<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"  media="all">
    <script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
    <style>
        ul li{

            list-style: none;

        }
        #overall{
            margin-left: 200px;
            width: 1200px;
            height: 1000px;
            border-style: solid;
            border-width: 15px 5px 15px 5px;
        }
        .left{
            width: 600px;
            height: 1000px;
            float: left;
            border-right-width: 5px;
        }
        #overall:after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div>
    <div id="overall1"></div>
</div>
<h>聊天室</h>
<div id="overall">
    <div class="left">
        <div id="Chatoverall" >
            <h1  id="overall2" style="text-align: center"></h1>
            <div style="width: 600px;height: 600px;background: #00d2ff">
                <div id="overall4">

                </div>
            </div>
            <div>
                <form>
                    <textarea placeholder="请输入内容" style="width: 600px;height: 120px" id="ii"></textarea>
                    <button type="button" class="layui-btn">发送</button>
                </form>
            </div>
        </div>
    </div>
    <div class="left">
        <div style="height: 600px;text-align: center" >
            <h>好友列表</h>
            <ul id="overall3">

            </ul>
        </div>

    </div>

</div>
<script>
    var tomname;
    $(function () {
        var item = sessionStorage.getItem("name");
        alert(item);
        $("#overall1").html("用户:"+item+"<spen style='float: right;color: green'>在线</spen>")
        $("#Chatoverall").hide();
        //创建websocker对象
        var host = window.location.host;
        var ws = new WebSocket("ws://"+host+"/websocket");
        //给ws绑定事件
        ws.onopen=function () {
            //建立连接
            //显示在线
            $("#overall1").html("用户:"+item+"<spen style='float: right;color: green'>在线</spen>");
        }
        //获取服务端推送的消息
        ws.onmessage=function (evt) {
            var dataStr=evt.data;
            alert(dataStr);
            var parse = JSON.parse(dataStr);
            //判断是不是系统消息
            alert(parse.system);
            if (parse.system){
                var names=parse.message;
                //系统消息
                var userlistStr="";
                //好友列表的展示
                for (var name of names) {
                    userlistStr+="<li><a onclick='a(\""+name+"\")'>"+name+"</a></li>"
                }
                $("#overall3").html(userlistStr);
            }else {
                //不是系统消息
                var tt="<div>"+"<ul>"+"<li>"+parse.fromName+"</li>"+"<li>"+parse.message+"</li>"+
                    "</ul>"+"</div>";
                //将消息进行展示这个是别人发给你这个登入的消息
                alert("--"+tomname);
                if (tomname===parse.fromName){
                    alert("11111111111111")
                    $("#overall4").append(tt);
                }
                var chatDate=sessionStorage.getItem(parse.fromName);
                if (chatDate!=null){
                   tt=chatDate+tt;
                }
                sessionStorage.setItem(tomname,tt);
            }
        }
        ws.onclose=function () {
            //断开连接
            $("#overall1").html("用户:"+item+"<spen style='float: right;color: red'>离线</spen>")
        }
        $(".layui-btn").click(function () {
            var item = sessionStorage.getItem("name");
            alert($("#ii").val());//获取发送的数据
            var  data = $("#ii").val();
            $("#ii").val("");//清空

            alert("跟谁聊天"+tomname);
            var strr="<div style='float: right '>"+"<ul>"+"<li>"+item+"</li>"+
                +"<li>"+data+"</li>"+"</ul>"+"</div>";
              $("#overall4").append(strr);
            var json={"toName":tomname,message:data};
            //发送数据
            var chatDate=sessionStorage.getItem(tomname);
            if (chatDate!=null){
                strr=chatDate+strr;
            }
            sessionStorage.setItem(tomname,strr);
            ws.send(JSON.stringify(json));

        })
    })
    function a(t) {
        tomname=t;
        $("#overall2").text(t);
        $("#Chatoverall").show();
        var chatData = sessionStorage.getItem(tomname);
        if (chatData!=null){
            //将聊天记录传递到聊天区
            $("#overall4").html(chatData);
        }


    }

</script>
</body>
</html>